// 伪代码 Vue的子类就是VueComponent
const comp = { data: {}, props: {} }
const Ctor = Vue.extend(comp)
// 使用propsData传参，new ctor就相当于create了！！！得到组件实例
new Ctor({ propsData: {} })

// extend实现
function create(Component, props) {
  // 组件构造函数如何获取？
  // 1.Vue.extend()
  const Ctor = Vue,extend(Component)
  // 创建组件实例，得到虚拟DOM
  const comp = new Ctor({propsData:props})
  // 挂载
  comp.$mount()
  // 获取真实dom，本身就是实例了！
  document.body.appendChild(comp.$el)
  // 删除
  comp.remove = function() {
    document.body.removeChild(comp.$el)
    comp.$destroy()
  }
  return comp
}
// render实现

// 2.render
function create(Component, props) {
  const vm = new Vue({
    // h是createElement, 返回VNode，是虚拟dom
    // 需要挂载才能变成真实dom
    render: h => h(Component, {props}),
  }).$mount() // 不指定宿主元素，则会创建真实dom，但是不会追加操作，指定body的话就把东西全覆盖了！

  // 获取真实dom，把dom元素追加一下
  document.body.appendChild(vm.$el)
  // 获取真实的组件实例，vm是根组件，第一个孩子，现在只有一个孩子
  const comp = vm.$children[0]

  // 删除
  comp.remove = function() {
    document.body.removeChild(vm.$el)
    vm.$destroy()
  }

  return comp

}